import React from 'react';
import { Card, Descriptions, Tag, Typography, Row, Col, Statistic } from 'antd';

const { Text, Paragraph } = Typography;

interface Props {
  nodeData: any;  // 直接接收节点数据
}

const NodeDetailPanel: React.FC<Props> = ({ nodeData }) => {
  if (!nodeData) return null;

  const props = nodeData.properties || {};



  // 格式化时间
  const formatTime = (time: string) => {
    if (!time) return '-';
    try {
      return new Date(time).toLocaleString('zh-CN');
    } catch {
      return time;
    }
  };

  // 格式化数字
  const formatNumber = (num: number) => {
    if (num >= 10000) return `${(num / 10000).toFixed(1)}万`;
    if (num >= 1000) return `${(num / 1000).toFixed(1)}k`;
    return num?.toString() || '0';
  };

  // 废弃等级颜色
  const getDeprecationColor = (level: string) => {
    const map: Record<string, string> = {
      MINIMAL_RISK: 'success',
      LOW_RISK: 'success',
      MEDIUM_RISK: 'warning',
      HIGH_RISK: 'error',
      EXTREME_RISK: 'error'
    };
    return map[level] || 'default';
  };

  // 服务类型颜色
  const getServiceTypeColor = (type: string) => {
    const map: Record<string, string> = {
      REST: 'green',
      DUBBO: 'blue',
      MAIN: 'purple',
      NONE: 'default'
    };
    return map[type] || 'default';
  };

  return (
    <div style={{ padding: '12px', height: '100%', overflow: 'auto' }}>
      {/* 标题区域 */}
      <Card size="small" style={{ marginBottom: 12, background: '#fafafa' }}>
        <div style={{ marginBottom: 8 }}>
          <Text strong style={{ fontSize: 14 }}>
            {props.isEntry ? '▶️' : '⚙️'} {props.methodName || '未知方法'}
          </Text>
        </div>
        <div>
          {props.isEntry && <Tag color="purple">入口方法</Tag>}
          {props.serviceType && <Tag color={getServiceTypeColor(props.serviceType)}>{props.serviceType}</Tag>}
          {props.codeStatus && <Tag>{props.codeStatus}</Tag>}
        </div>
      </Card>

      {/* 基本信息 */}
      <Card title="📋 基本信息" size="small" style={{ marginBottom: 12 }}>
        <Descriptions size="small" column={1} labelStyle={{ width: '80px', fontWeight: 500 }}>
          {props.methodSignature && (
            <Descriptions.Item label="方法签名">
              <Paragraph
                copyable
                style={{
                  margin: 0,
                  fontSize: 11,
                  fontFamily: 'Consolas, Monaco, monospace',
                  wordBreak: 'break-all'
                }}
              >
                {props.methodSignature}
              </Paragraph>
            </Descriptions.Item>
          )}
          {props.methodFullNameWithParams && (
            <Descriptions.Item label="完整签名">
              <Paragraph
                copyable
                style={{
                  margin: 0,
                  fontSize: 11,
                  fontFamily: 'Consolas, Monaco, monospace',
                  wordBreak: 'break-all'
                }}
              >
                {props.methodFullNameWithParams}
              </Paragraph>
            </Descriptions.Item>
          )}
          {props.className && (
            <Descriptions.Item label="类名">
              <Text code style={{ fontSize: 11 }}>{props.className}</Text>
            </Descriptions.Item>
          )}
          {props.packageName && (
            <Descriptions.Item label="包名">
              <Text type="secondary" style={{ fontSize: 11 }}>{props.packageName}</Text>
            </Descriptions.Item>
          )}
          {props.cyclomaticComplexity != null && (
            <Descriptions.Item label="圈复杂度">
              <Tag color={props.cyclomaticComplexity > 10 ? 'red' : 'green'}>
                {props.cyclomaticComplexity}
              </Tag>
            </Descriptions.Item>
          )}
        </Descriptions>
      </Card>

      {/* 服务信息 */}
      {props.serviceName && (
        <Card title="🌐 服务信息" size="small" style={{ marginBottom: 12 }}>
          <Descriptions size="small" column={1} labelStyle={{ width: '80px', fontWeight: 500 }}>
            <Descriptions.Item label="服务路径">
              <Paragraph
                copyable
                style={{
                  margin: 0,
                  fontSize: 11,
                  fontFamily: 'Consolas, Monaco, monospace',
                  wordBreak: 'break-all'
                }}
              >
                {props.serviceName}
              </Paragraph>
            </Descriptions.Item>
          </Descriptions>
        </Card>
      )}

      {/* APM 调用统计 */}
      {props.apmExists && (
        <Card title="📊 APM调用统计" size="small" style={{ marginBottom: 12 }}>
          <Row gutter={8}>
            {props.apmCount1y != null && (
              <Col span={8}>
                <Statistic
                  title="年调用"
                  value={formatNumber(props.apmCount1y)}
                  valueStyle={{ color: '#1890ff', fontSize: 16 }}
                />
              </Col>
            )}
            {props.apmCount6m != null && (
              <Col span={8}>
                <Statistic
                  title="半年"
                  value={formatNumber(props.apmCount6m)}
                  valueStyle={{ color: '#52c41a', fontSize: 16 }}
                />
              </Col>
            )}
            {props.apmAvgDailyCalls != null && (
              <Col span={8}>
                <Statistic
                  title="日均"
                  value={props.apmAvgDailyCalls.toFixed(1)}
                  valueStyle={{ color: '#faad14', fontSize: 16 }}
                />
              </Col>
            )}
          </Row>
          {props.apmUpdateTime && (
            <div style={{ marginTop: 8, fontSize: 11, color: '#8c8c8c' }}>
              更新: {formatTime(props.apmUpdateTime)}
            </div>
          )}
        </Card>
      )}

      {/* 废弃分析 */}
      {props.deprecationLevel && (
        <Card title="⚠️ 废弃分析" size="small" style={{ marginBottom: 12 }}>
          <Descriptions size="small" column={1} labelStyle={{ width: '80px', fontWeight: 500 }}>
            <Descriptions.Item label="风险等级">
              <Tag color={getDeprecationColor(props.deprecationLevel)} style={{ fontSize: 12 }}>
                {props.deprecationLevel}
              </Tag>
            </Descriptions.Item>
            {props.deprecationScore != null && (
              <Descriptions.Item label="废弃分数">
                <Text strong style={{ fontSize: 18, color: getDeprecationColor(props.deprecationLevel) === 'error' ? '#f5222d' : '#faad14' }}>
                  {props.deprecationScore}
                </Text>
                <Text type="secondary"> / 100</Text>
              </Descriptions.Item>
            )}
            {props.deprecationReason && (
              <Descriptions.Item label="原因">
                <Text style={{ fontSize: 11 }}>{props.deprecationReason}</Text>
              </Descriptions.Item>
            )}
          </Descriptions>
        </Card>
      )}

      {/* Git 信息 */}
      {(props.gitCreateTime || props.gitLastEditTime) && (
        <Card title="📝 Git信息" size="small" style={{ marginBottom: 12 }}>
          <Descriptions size="small" column={1} labelStyle={{ width: '80px', fontWeight: 500 }}>
            {props.gitLastEditTime && (
              <Descriptions.Item label="最后修改">
                <div style={{ fontSize: 11 }}>{formatTime(props.gitLastEditTime)}</div>
              </Descriptions.Item>
            )}
            {props.gitLastEditEmp && (
              <Descriptions.Item label="修改人">
                <Tag color="blue">{props.gitLastEditEmp}</Tag>
              </Descriptions.Item>
            )}
            {props.gitCreateTime && (
              <Descriptions.Item label="创建时间">
                <div style={{ fontSize: 11 }}>{formatTime(props.gitCreateTime)}</div>
              </Descriptions.Item>
            )}
            {props.gitCreateEmp && (
              <Descriptions.Item label="创建人">
                <Tag>{props.gitCreateEmp}</Tag>
              </Descriptions.Item>
            )}
          </Descriptions>
        </Card>
      )}

      {/* SA 扫描信息 */}
      {props.saExists && (
        <Card title="🔍 SA扫描" size="small" style={{ marginBottom: 12 }}>
          <Descriptions size="small" column={1} labelStyle={{ width: '80px', fontWeight: 500 }}>
            {props.saLastInvocationTime && (
              <Descriptions.Item label="最后调用">
                <div style={{ fontSize: 11 }}>{formatTime(props.saLastInvocationTime)}</div>
              </Descriptions.Item>
            )}
            {props.saFirstFoundTime && (
              <Descriptions.Item label="首次发现">
                <div style={{ fontSize: 11 }}>{formatTime(props.saFirstFoundTime)}</div>
              </Descriptions.Item>
            )}
          </Descriptions>
        </Card>
      )}
    </div>
  );
};

export default NodeDetailPanel;

